import { Card, Loading, ResponsiveGrid } from '@alifd/next';
import PageHeader from '@/components/PageHeader';
import { useLocation, useRequest } from 'ice';
import AddrService from './service';
import AddrForm from '@/pages/OperationCenter/AddressManage/components/AddrForm';
import EmptyBlock from '@/pages/OperationCenter/AddressManage/components/EmptyBlock';
import { useEffect, useState } from 'react';
import st from './index.module.scss';

const { Cell } = ResponsiveGrid;

export const pathObj = {
  '/operationCenter/addressManage': {
    getService: AddrService.getPlatformAddrDetail,
    saveService: AddrService.savePlatformAddr,
    pageHeaderProps: {
      title: '货运地址',
      breadcrumbs: [
        { name: '运营中心' },
        { name: '地址管理' },
      ],
    },
  },
  '/logisticsManage/myAddress': {
    getService: AddrService.getSellerAddrDetail,
    saveService: AddrService.saveSellerAddr,
    pageHeaderProps: {
      title: '货运地址',
      breadcrumbs: [
        { name: '物流管理' },
        { name: '我的地址' },
      ],
    },
  },
};

const AddressManage = () => {
  const location = useLocation();
  const [empty, setEmpty] = useState(true);
  const { data, refresh, loading } = useRequest(pathObj[location.pathname].getService, {
    manual: false,
  });

  useEffect(() => {
    setEmpty(!data?.id);
  }, [data?.id]);

  return (
    <ResponsiveGrid gap={20}>
      <Cell colSpan={12}>
        <PageHeader {...pathObj[location.pathname].pageHeaderProps} />
      </Cell>

      <Cell colSpan={12}>
        <Card free className={st.addrForm}>
          <Card.Content>
            <Loading visible={loading}>
              {empty ? (
                <EmptyBlock onAdd={() => setEmpty(false)} />
              ) : (
                <AddrForm detail={data || {}} onRefresh={refresh} onEmpty={() => setEmpty(true)} />
              )}
            </Loading>
          </Card.Content>
        </Card>
      </Cell>
    </ResponsiveGrid>
  );
};

export default AddressManage;
